﻿@page "/chart/hilo"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts
@using Newtonsoft.Json

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/hilo-chart'>Blazor Hilo Chart</a> example visualizes the AAPL historical data with default Hilo series in the chart. Tooltip and crosshair show the information about the data and period.</p>
</SampleDescription>
<ActionDescription>
    <p> In this example, you can see how to render and configure the HILO type series. The HILO type series shows the high and low stock values over a given period of time.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p> More information about the HILO series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/high-low'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="AAPL Historical" Theme="@Theme">
        <ChartArea>
            <ChartAreaBorder Width="0"></ChartAreaBorder>
        </ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
            <ChartAxisCrosshairTooltip Enable="true"></ChartAxisCrosshairTooltip>
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Price" Minimum="10" Maximum="180" Interval="20" LabelFormat="${value}">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
        <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
        <ChartCrosshairSettings Enable="true" LineType="LineType.Vertical">
        </ChartCrosshairSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="Apple Inc" XName="Period" High="High" Low="Low" Type="ChartSeriesType.Hilo">
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public HiloData[] ChartPoints { get; set; } = new HiloData[] { };

    protected override void OnInitialized()
    {
        ChartPoints = JsonConvert.DeserializeObject<HiloData[]>(System.IO.File.ReadAllText("./wwwroot/data/chart/financial-data.json"));
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class HiloData
    {
        public DateTime Period { get; set; }
        public double High { get; set; }
        public double Low { get; set; }
    }
}

